Discussion on the causes and solutions of {{}} appearing in vue in html

2021-09-20 19:23:51
OfStack

Reason:

Browser rendering mechanism, parsing html structure- > Load external script and style sheet files- > Parse and execute the script code- > Constructing html dom model- > Load external files such as pictures- > The page is loaded.

The js that initializes vue is written at the bottom of the page, which is the last time the js script is executed.

So when the page is rendered from beginning to end, when it is rendered to the tag, because vue has not been initialized, it will display code like this

< h2 > {{courseName}} < /h2 >

When the network speed is very slow, it can be seen clearly, which may make users mistakenly think that bug and the like. If it is 1 o'clock fast, it is 1 flash, and the experience is not very good

Solution:

1. A lot of things said on the Internet use v-cloak.


<div id="app" v-cloak>
  {{context}}
</div>
[v-cloak]{
  display: none;
}

But I used it, it is invalid. Where may I use it incorrectly? Then I simply realized it according to my own ideas

2. I now implement the solution by adding class = 'hide' to the outermost div (. hide {display: none}, note that this style should be written in head), and then remove this class hide after the initialization of vue is completed. The approximate code is as follows


<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 <title> Title </title>
 <style>
  .hide{
   display: none;
  }
 </style>
</head>
<body>
 <div id="app" class="hide">
  <h2>{{courseName}}</h2>
 </div>
 <script>
  // Initialization vue
  initVue()
 
  function initVue() {
   new Vue({
    el: '#app',
    data: function () {
     return {
      datas:{
       courseName:''
      }
     }
    },
    mounted() {
     // Remove hidden styles 
     document.querySelector('#app').classList.remove('hide')
    }
   })
  }
 </script>
</body>

Additional knowledge: Data communication between native js and vue-EventEmitter

There is a small project written in the original native framework, but I don't want to write native, so I introduced vue

Then there is a requirement to interact with the native js, so you can use node. js EventEmitter

Specific practices:

Introduce the file first < script src="../../js/eventEmitter.js" > < /script > ,

Initialization,

Then send emit in vue,

Listen to on outside


var event = new EventEmitter();
$(document).ready(function () {
  // Eavesdropping some_event Events 
  event.on('some_event', function (data) {
    
  });
} ) 
 
let vm = new Vue({
  el: "#app",
  methods: {
    getList() {
      //  Trigger event 
      event.emit('some_event','params');
    },
  }
});

Attached is eventEmitter. js


class EventEmitter {
 constructor() {
  this.event = {};
  this.maxListerners = 10;
 }
 //  Eavesdropping 
 on(type, listener) {
  if (this.event[type]) {
   if (this.event[type].length >= this.maxListerners) {
    console.error(' Same as 1 The maximum number of listeners is 10 Object listening , Otherwise, it may cause memory leakage .\n');
    return;
   }
      if (!this.event[type].includes(listener)) {
        this.event[type].push(listener);
      }
  } else {
   this.event[type] = [listener];
  }
 }
 // Send monitor 
 emit(type, ...rest) {
  if (this.event[type]) {
   this.event[type].map(fn => fn.apply(this, rest));
  }
 }
 // Remove listener 
 removeListener(type,func) {
  if (this.event[type]) {
      this.event[type] = this.event[type].filter(item => item !== func);
      if (this.event[type].length === 0) {
        delete this.event[type];
      }
  }
 }
 // Remove all listeners 
 removeAllListener() {
  this.event = {};
 }
}